<!--  区块链新闻 -->
<template>

  <div class="container">

    <!--  面包屑导航 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
        <li class="breadcrumb-item"><a href="#">新闻版块</a></li>
        <li class="breadcrumb-item active" aria-current="page">区块链新闻</li>
      </ol>
    </nav>

    <button type="button" @click="getBlockChainNews" class="btn btn-outline-success">获取区块链新闻</button>

    <ul class="list-group">
      <li class="list-group-item" v-for="item in newslist" :key="item.id">
        <img class="" v-bind:src="item.picUrl" alt="">
        <div class="d-inline-block">
          <p class="text-left text-wrap font-weight-bold">
            <a v-bind:href="item.url" target="_blank">
              {{ item.title }}
            </a>
          </p>
          <span class="text-left small">{{ item.ctime }}</span>
        </div>

      </li>
    </ul>

  </div>

</template>

<script>
  export default {
    name: 'BlockChainNews',
    data() {
      return {
        newslist: []
      }
    },
    methods: {
      async getBlockChainNews() {
        const result = await this.$http.get('http://api.tianapi.com/blockchain/index', {
          params: {
            key: 'd1032a21949c41bbf6a472ec75a94e2a',
            num: 10
          }
        });
        this.newslist = result.data.newslist;
        console.log(result);
      }
    }
  }
</script>

<style scoped>

  ul li img {
    width: 170px;
    height: 100px;
  }

  ul li div {
    margin-left: 20px;
  }


  ul li p {
    font-size: 24px;
  }

</style>
